<script setup lang='ts'>
import Header from '@/components/Header.vue'
import { onMounted, ref } from 'vue';
import { useHomeStore } from '@/stores/home'
import { computed } from '@vue/reactivity';
import moment from 'moment'
//调用homeStore
const homeStore = useHomeStore();
//封装请求
const getRequest = () => {
    //发送banner的请求
    homeStore.getBannerListHandler();
    //发送grid请求
    homeStore.getGridListHandler();
    //获取秒杀列表数据
    homeStore.getSeckilllistHandler({ count: 1, limitNum: 10 });
    //获取商品列表数据
    homeStore.getGoodsListHandler({ count: 1, limitNum: 10 });
}
//TODO 在mounted里面发送请求
onMounted(() => {
    //批量发送请求
    getRequest()
})
//TODO 获取轮播数据
const BannerList = computed(() => {
    return homeStore.bannerList
})
//TODO 获取宫格数据
const GridList = computed(() => {
    return homeStore.gridList
})
//TODO 获取商品数据
const GoodsList = computed(() => {
    return homeStore.goodsList
})
//TODO 获取秒杀数据
const Seckilllist = computed(() => {
    return homeStore.seckilllist
})
//TODO 计算属性计算距离12点的毫秒值
const time = computed(() => {
    //14号最后一秒,马上就要到15号
    // console.log(+new Date(moment().endOf("day").format("YYYY-MM-DD 00:00:00"))+ 24*60*60*1000);
    // //现在的时间戳
    // +new Date();
    return +new Date(moment().endOf("day").format("YYYY-MM-DD 00:00:00")) + 24 * 60 * 60 * 1000 - +new Date()
})
//TODO 商品列表
/* 
    1. 在mounted发送请求
    2. 将数据交给仓库,持久化
    3. 在组件使用计算属性获取store里面的state,渲染页面
    4. 触底加载=>显示lodding效果发送count=2.请求,将数据存储到页面当中,持久化
    5. 组件再次获取数据,再次渲染,此时应该有20条数据
*/
//TODO 触底加载
const loading = ref(false);//加载的效果
const count = ref(1) //触发刷新获取后面一页的数据
const finished = ref(false) //不刷新了
const onLoad = () => {//触底触发的函数
    //将loading变成一个true
    loading.value = true;

    //目的: 就是为了让我们自己能看到效果
    setTimeout(async () => {
        count.value++

        //再次发送请求
        try {
            await homeStore.getGoodsListHandler({ count: count.value, limitNum: 10 });
        } catch {
            finished.value = true;
        }
        //再次获取数据
        GoodsList
        //将loading变成一个false
        loading.value = false;
    }, 500)
};
//TODO 再次刷新
const refresh = ref(false)
const onRefresh = () => {
    //有这个刷新效果
    refresh.value = true;
    //添加定时器的目的就只有一个,显示加载的效果
    setTimeout(() => {
        //批量发送请求
        getRequest()
        refresh.value = false;
    }, 500)
}
</script>
<template>
    <div class="home">
        <!-- TODO 头部组件 -->
        <Header></Header>
        <van-pull-refresh v-model="refresh" @refresh="onRefresh">
            <!-- TODO 轮播页面 -->
            <div class="banner">
                <van-swipe class="my-swipe" :autoplay="1000" indicator-color="red">
                    <van-swipe-item v-for="banner in BannerList"><img :src="banner.img" alt="" :key="banner.bannerid">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- TODO 宫格页面 -->
            <van-grid :column-num="5">
                <van-grid-item :icon="(item as any).url" :text="(item as any).text" :key="item.id"
                    v-for="item in GridList" />
            </van-grid>
            <!-- TODO 秒杀 -->
            <div class="miaosha">
                <div class="miaoshatop">
                    <span>晨锋秒杀</span>
                    <p>
                        <span>0</span>
                        <img src="./image/dc.png" alt="">
                    </p>
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes :
                                            timeData.minutes
                                    }}</span>
                                            <span class="colon">:</span>
                                            <span class="block">{{ timeData.seconds < 10 ? '0' + timeData.seconds :
                                                    timeData.seconds
                                            }}</span>
                        </template>
                    </van-count-down>
                </div>
                <div class="miaoshabottom">
                    <div class="item" v-for="item in Seckilllist" :key="item.proid">
                        <img :src="(item as any).img1" alt="">
                        <p>¥ {{ (item as any).originprice }}</p>
                    </div>
                </div>
            </div>
            <!-- TODO 商品列表 -->
            <!-- 
                loading 加载的效果
                onLoad 触发的函数
             -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="goodsList">
                    <div class="goodsListItem" v-for="item in GoodsList" :key="item.proid">
                        <img :src="item.img1" alt="">
                        <p>{{ item.desc }}</p>
                        <span>¥ {{ item.originprice }}</span>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<style scoped lang="scss">
.goodsList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .goodsListItem {
        width: 45%;

        p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //多行在这里修改数字即可
            overflow: hidden;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
        }

        img {
            height: 300px;
        }

        span {
            color: red;
        }
    }

    &::after {
        content: "";
        display: block;
        width: 45%;
    }
}

.miaosha {
    background-color: #fff;
    padding: 0 20px;

    .miaoshatop {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 700;

        p {
            font-weight: 400;
            display: flex;
            align-items: center;
            margin: 0 20px;
            color: red;

            img {
                width: 40px;
                height: 40px;
            }
        }
    }

    .miaoshabottom {
        display: flex;

        .item {
            margin-right: 10px;

            img {
                width: 100px;
                height: 100px;
            }

            p {
                color: #F45533;
                font-size: 16px;
                font-weight: 700;
            }
        }
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    border-radius: 20px;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    display: block;
}

:deep(.van-grid-item__content) {
    background-color: #F6F6F6;
}

.banner {
    padding: 20px;
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}

.block {
    display: inline-block;
    width: 44px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
}

.home {
    padding-bottom: 100px;
}
</style>